<template>
  <div>
    <!-- <div class="m-div">这里是标题</div>
    <p class="m-p">
      这地方灯笼裤飞机拉萨的飞机是考虑到房价立刻受到激发看来是的房间里撒旦发生六点发了多少咖啡机螺丝扣搭街坊卢萨卡地方这地方灯笼裤飞机拉萨的飞机是考虑到房价立刻受到激发看来是的房间里撒旦发生六点发了多少咖啡机螺丝扣搭街坊卢萨卡地方这地方灯笼裤飞机拉萨的飞机是考虑到房价立刻受到激发看来是的房间里撒旦发生六点发了多少咖啡机螺丝扣搭街坊卢萨卡地方这地方灯笼裤飞机拉萨的飞机是考虑到房价立刻受到激发看来是的房间里撒旦发生六点发了多少咖啡机螺丝扣搭街坊卢萨卡地方
    </p> -->
    <!-- <van-button type="info" @click="btnclick">信息按钮</van-button> -->
    <van-field v-model="salon.sname" label="店名" />
    <van-field v-model="salon.code" label="编号" disabled />
    <van-field v-model="salon.address" label="地址" />
    <van-field v-model="salon.area" label="面积 ㎡" />
    <van-field v-model="salon.cnumber" label="人数" />
    <!-- <van-field label="业态">
      <template #extra>
        <van-checkbox-group v-model="checkList" class="m-salon-field">
          <van-checkbox name="1">【生美】美睫美甲纹绣</van-checkbox>
          <van-checkbox name="2">【生美】面（头）部类</van-checkbox>
          <van-checkbox name="3">【生美】身体类</van-checkbox>
          <van-checkbox name="4">【生美】中医养生类</van-checkbox>
          <van-checkbox name="5">【生美】大健康类</van-checkbox>
          <van-checkbox name="6">【轻医美机构】</van-checkbox>
          <van-checkbox name="7">【综合医美机构】</van-checkbox>
          <van-checkbox name="8">【异业】服务女性的非美业</van-checkbox>
          <van-checkbox name="9">其他</van-checkbox>
        </van-checkbox-group>
      </template>
    </van-field> -->
    <van-button type="info" block @click="btnclick">提交变更</van-button>
  </div>
</template>
<script>
import Button from 'vant/lib/button'
import Field from 'vant/lib/field'
import Checkbox from 'vant/lib/checkbox'
import CheckboxGroup from 'vant/lib/checkbox-group'
import Dialog from 'vant/lib/dialog'
import Notify from 'vant/lib/notify'
import 'vant/lib/button/style'
import 'vant/lib/checkbox/style'
import 'vant/lib/checkbox-group/style'
import 'vant/lib/field/style'
import 'vant/lib/dialog/style'
import 'vant/lib/notify/style'
import { editSalon } from '@/api/txs'

export default {
  components: {
    [Button.name]: Button,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Dialog.name]: Dialog,
    [Notify.name]: Notify,
    [Field.name]: Field
  },
  props: {
    salon: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  // watch: {
  //   salon: function (val) {
  //     console.log(val) // 接收父组件的值
  //   }
  // },
  data () {
    return {
      checkList: []
    }
  },
  // computed: {
  //   checkList() {
  //     return this.salon.stype.split(' ')
  //   }
  // },
  mounted () {
    this.checkList = this.salon.stype.split(' ')
  },
  methods: {
    btnclick () {
      Dialog.confirm({
        message: '确定要变更门店信息吗？'
      })
        .then(() => {
          console.log(this.salon)
          const tempData = Object.assign({}, this.salon)
          tempData.stype = this.checkList.join(' ')
          editSalon(tempData).then(() => {
            Notify({ type: 'success', message: '提交成功' })
          })
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.m-salon-field {
  margin-right: 80px;
  div {
    margin-bottom: 20px;
  }
}
</style>
